<template>
  <view style="margin: 30rpx">
    <view style="margin-top: -80rpx"></view>
    <view>
      <!-- 我的订单 -->
      <u-subsection
        :list="list"
        :current="current"
        inactiveColor="white"
        activeColor="red"
        bgColor="#F03C3C"
        @change="sectionChange"
      ></u-subsection>
    </view>

    <!-- //订单内容 -->
    <view class="orderBox">
      <view style="display: flex">
        <view>
          <image
            src="https://wx1.sinaimg.cn/mw690/e8a22d7bgy1hovb7jydr5j20u018zgsd.jpg"
            style="width: 150rpx; height: 150rpx; border-radius: 20rpx"
          ></image>
        </view>
        <view style="margin: 0rpx 30rpx 0rpx 30rpx; font-size: 25rpx"
          >女士羽绒服2025新款冬季韩版时尚百搭中长款羽绒服女装外套
          <view style="margin-top: 40rpx; color: gray">500g</view>
        </view>
        <view style="color: red"
          >￥222.00
          <view style="margin-left: 50rpx; color: gray">x1</view>
        </view>
      </view>

      <!-- //实付款 -->
      <view
        style="
          display: flex;
          justify-content: space-between;
          margin: 20rpx 0rpx 20rpx 0rpx;
        "
      >
        <view>实付款：<text style="color: red">￥222.00</text></view>
        <view>共1件</view>
      </view>
      <!-- //时间 -->
      <view
        style="margin-top: 10rpx; display: flex; justify-content: space-between"
      >
        <view>2021-01-01 12:00:00</view>
        <view style="color: gray">剩余09：59</view>
      </view>
      <!-- //去支付 -->
      <view class="zfbnt1">
        <!-- 状态 -->
        <text style="color: red; margin-right: 33%">待付款</text>
        <view
          class="zfbtn2"
          style="
            margin-right: 20rpx;
            background-color: white;
            color: black;
            border: 1rpx solid gray;
          "
          @click="getorder(1)"
        >
          查看订单
        </view>
        <view class="zfbtn2"> 立即支付 </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ["全部", "待付款", "待完成", "已完成", "已取消"],
      // 或者如下，也可以配置keyName参数修改对象键名
      // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
      current: 0,
    };
  },
  methods: {
    sectionChange(index) {
      console.log(index);
      this.current = index;
    },
    getorder() {
      uni.navigateTo({
        url: "/pages/index/orderInfo",
      });
    },
  },
};
</script>

<style lang="less">
.zfbtn2 {
  background-color: #f03c3c;
  color: white;
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
}
.zfbnt1 {
  display: flex;
  justify-content: flex-end;
  margin: 20rpx 0rpx 20rpx 0rpx;
}
.orderBox {
  margin: 30rpx 0rpx 30rpx 0rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  background-color: white;

  border-radius: 10rpx;
}
page {
  background-color: #f1f1f1;
  font-size: 30rpx;
}
</style>
